<template>
  <div style="padding: 10px">
    <el-form label-width="120px" style="margin-bottom: 10px">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="销售订单号">
            <el-input v-model="state.sd.csocode" placeholder="销售订单号"/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="存货名称">
            <el-input v-model="state.sd.cinvname" placeholder="存货名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="客户名称">
            <el-input v-model="state.sd.ccusname" placeholder="客户名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button size="default" type="primary" class="ml10" @click="searchData">
            <el-icon><ele-Search /></el-icon>查询
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="state.jinDuList" border style="width: 100%">
      <el-table-column label="订单号" prop="cSoCode" width="200"></el-table-column>
      <el-table-column label="客户名称" prop="cCusName" width="300"></el-table-column>
      <el-table-column label="存货名称" prop="cInvName" width="200"></el-table-column>
      <el-table-column label="存货编码" prop="cInvCode" width="200"></el-table-column>
      <el-table-column label="订单数量" width="200">
        <template v-slot="scope">
          <span style="color: #f56c6c">{{scope.row.isll}}{{scope.row.cComUnitName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="已发货">
        <template v-slot="scope">
          <span>{{scope.row.fcount}}</span>
        </template>
      </el-table-column>
      <el-table-column label="库存数据">
        <template v-slot="scope">
          <span>结存数量：{{scope.row.kccount}}</span><br />
          <span>锁定数量：{{scope.row.lockcount}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="page3pc">
import request from '/@/utils/request';
import { ElMessage } from 'element-plus';
import {reactive, ref, onMounted} from "vue";

const state = reactive({
  sd: {
    csocode: '',
    ccusname: '',
    cinvname: ''
  },
  jinDuList: [],
})
const searchData = ()=>{
  if(state.sd.csocode || state.sd.ccusname || state.sd.cinvname){
    loadData();
  }else{
    ElMessage.error("请输入查询条件")
  }
}
const loadData = ()=>{
  if(state.sd.csocode || state.sd.ccusname || state.sd.cinvname){
    request({
      url: '/sal/listgqsomain',
      data: state.sd
    }).then(res => {
      const { data } = res
      state.jinDuList = data
    })
  }else{
    state.jinDuList = [];
  }
}
onMounted(()=>{

})
</script>

<style scoped lang="scss">

</style>
